// Licensed to the Apache Software Foundation (ASF) under one or more
// contributor license agreements.  See the NOTICE file distributed with
// this work for additional information regarding copyright ownership.
// The ASF licenses this file to You under the Apache License, Version 2.0
// (the "License"); you may not use this file except in compliance with
// the License.  You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.integrationProviders {
  border: 0;
  display: flex;
  width: 80%;
  min-width: 520px;
  align-self: flex-start;
  padding: 10px;

  .iProvider {
    margin: 0 30px 15px 0;
    text-align: center;
    width: 96px;
    height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.3s ease-out;
    opacity: 0.85;

    &:hover {
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
      border: 2px solid #7497F7;
      background-color: #eeeeee;
      opacity: 1.0;

      svg:first-of-type,img:first-of-type {
        transform: scale(1.05);
      }

      .providerName {
        color: #222222;
        font-weight: bold;
      }

      svg:first-of-type,img:first-of-type {
        transition: all 0.3s ease-out;
      }

    }

    .providerName {
      cursor: pointer;
      transition: color 0.3s ease-out;
      color: #777777;
    }

    .providerIcon {
      cursor: pointer;
      min-height: 48px;
      min-width: 48px;
    }
  }
}

.manageProvider {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  width: 100%;
  min-width: 786px;
}

.table-action-link {
  margin-left: 15px;
  text-decoration: none;
  line-height: 16px;
  color: #666666;
  transition: all 0.3s ease-in;

  &:hover {
    color: #111111;

    >.bp3-icon {
      opacity: 1.0;
    }
  }

  >.bp3-icon {
    margin-right: 5px;
    margin-bottom: 2px;
    opacity: 0.5;
    transition: all 0.3s ease-in;
  }
}

table.connections-table {

  tbody {
    tr {
      cursor: pointer;

      &.connection-offline {
        background-color: rgba(191, 204, 214, 0.25);

        td {
          color: #888888;
        }
      }

      &:hover {
        background-color: rgba(191, 204, 214, 0.15);
      }
    }
  }
}

.bp3-button.bp3-intent-primary {
  // background-color: #E8471C;
  &:hover {
    // background-color: #ff6a42;
  }
}

.bp3-breadcrumbs-collapsed::before {
  background-color: transparent;
  background-image: url();
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
}

.configureConnection, .addConnection {
  min-width: 690px;
  max-width: 860px;
  margin-right: auto;

  .bp3-input-group {
    &.connection-name-input, &.username-input, &.password-input {
      min-width: 320px;
      width: auto;
      max-width: 460px;
    }
  }
}

.bp3-input-group {
  &.invalid-field {
    + label { font-weight: bold }
    > input, > textarea {
      box-shadow: rgb(232, 28, 28) 0px 0px 0px 1px, rgba(232, 71, 28, 0.3) 0px 0px 0px 3px, rgba(16, 22, 26, 0.2) 0px 1px 1px 0px inset;
      box-sizing: border-box;
      background-color: #ffeeee;
    }
  }

  > input[readonly] {
    background-color: #f8f8f8;
  }
}